<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
	<title>
		<tiles:insertAttribute name="title" ignore="true"></tiles:insertAttribute>
	</title>
	<link rel="stylesheet" type="text/css" href="resources/css/home.css" />
	<link rel="stylesheet" href="resources/css/jquery-ui.css" />
	<style type="text/css" title="currentStyle">
		@import "resources/css/demo_page.css";
		@import "resources/css/demo_table.css";
	</style>
	<style>
		.column { width: 60%; float: left; padding-bottom: 100px; }
		.portlet { margin: 0 1em 1em 0; }
		.portlet-header {  padding: 6px; padding-left: 1.2em; }
		.portlet-header .ui-icon { float: right; }
		.portlet-content { padding: 0.4em; }
		.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
		.ui-sortable-placeholder * { visibility: hidden; }
		.ui-widget-header {
			background: white;
			border: 0px solid #AAAAAA;
			color: #222222;
		}
		.ui-widget-content {
		border:0px;
		}
		.portlet-content {
			border: 1px solid #AAAAAA;
		}
    </style>
	<script type="text/javascript" src="resources/javascript/lib/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="resources/javascript/lib/jquery-ui.js"></script>
	<script type="text/javascript" language="javascript" src="resources/javascript/lib/jquery.dataTables.js"></script>
	<script type="text/javascript" charset="utf-8">
		$(function() {
			$( ".column" ).sortable({
				connectWith: ".column"
			});
			$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
				.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
				.end()
				.find( ".portlet-content" );
			$( ".portlet-header .ui-icon" ).click(function() {
				$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
				$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
			});
			$( ".column" ).disableSelection();
		});
	</script>	
</head>

<body>

<div id="container">
	<div id="wrapper">
		<div id="header">
			<tiles:insertAttribute name="header"></tiles:insertAttribute>
		</div>
		
		<div id="bodycontent">
			<div id="left-navigate">
				<tiles:insertAttribute name="menu"></tiles:insertAttribute>
			</div>
			<div id="content">
				<tiles:insertAttribute name="body"></tiles:insertAttribute>
			</div>
		</div>
			  
		<div id="footer">
			<tiles:insertAttribute name="footer"></tiles:insertAttribute>
		</div>
	</div>
</div>

</body>
</html>